
<template>
    <div class="box">
    
        <header>约课记录</header>
        <van-tabs v-model="active" :line-width="16" @change="change">
            <van-tab title="待上课"></van-tab>
            <van-tab title="已上课"></van-tab>
            <van-tab title="已取消"></van-tab>
        </van-tabs>
        <!-- ========================== -->
        <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
            <List v-if="login" ref="list" url="/api/app/oto/myInviteCourse/index" method="post" :params="params"
                :on-getdata="onGetdata" :showText="false">
                <section slot="item" class="record-list">
                <div class="rl-item" v-for="(item,index) in list" :key="index">
                    <div class="rl-info">
                    <img class="avatar" :src="item.avatar" />
                    <div class="rl-content">
                        <p class="rl-time">{{item.course_time}}</p>
                        <p class="rl-name">
                        {{item.nickname}}
                        <span>（{{item.chapter_time}}分钟）</span>
                        </p>
                        <p v-show="active != 2" class="rl-notice">{{item.course_tips}}</p>
                    </div>
                    </div>
                    <div class="rl-action" v-show="active != 2">
                    <p @click="goPage(item)">
                        <i></i>
                        <span :class="{'active':item.is_read}">沟通记录</span>
                    </p>
                    <p @click="look(item.id)">
                        <i></i>
                        <span>{{active == 0?'进入教室':'查看回放'}}</span>
                    </p>
                    <p>
                        <i></i>
                        <span v-if="active == 0" @click="sendCancel(item)">取消约课</span>
                        <span v-else @click="comment(item)">{{item.is_comment == 0?'评价老师':'已评价'}}</span>
                    </p>
                    </div>
                    <div
                    v-show="active == 2"
                    class="rl-cancel"
                    >于{{item.cancel_at | fomartTime('yyyy.MM.dd hh:mm')}}取消</div>
                </div>
                </section>
            </List>

<!-- =========================== -->
            <div class="rp-empty" v-show="!show">
                <img src="../../assets/images/no-message.png" />
                <p>{{emptyTip}}</p>
                <van-button v-show="(active == 0 || active == 1) && login" @click="toPage">立即约课</van-button>
                <van-button v-if="!login" @click="toPage">登录/注册</van-button>
            </div>
<!-- ================================= -->
        </van-pull-refresh>
            <van-dialog v-model="cancelModel" title="提示" show-cancel-button @confirm="cancel">
                <p class="rp-notice">{{msg}}</p>
            </van-dialog>
            <!-- <evaluating ref="comModel" @refresh="change" com_type="2"></evaluating> -->
        </div>
        
    </div>
</template>
<script>
import { Tab, Tabs } from 'vant';
import { Button } from 'vant';
import { PullRefresh } from 'vant';
import { Toast } from 'vant';
import { Dialog } from 'vant';
   export default {
        name:'record',
        components: {
            [Tab.name]: Tab,
            [Tabs.name]: Tabs,
            [Button.name]: Button,
            [PullRefresh.name]: PullRefresh,
            [Toast.name]: Toast,
            [Dialog.name]: Dialog,
            [Dialog.Component.name]: Dialog.Component
        },
        data() {
            return {
                active: 0,
                list: [],
                cancelModel: false,
                cancel_id: "",
                msg: "",
                params: {
                    type: 1
                },
                login: false,
                isLoading: false
            };
        },
        computed: {
            show: {
                get() {
                    return this.list.length;
                },
                set() {}
            },
            isApp() {
                return this.$store.state.app;
            },
            emptyTip() {
                let ret = "";
                if (this.login) {
                    switch (this.active) {
                    case 0:
                        ret = "还没有待上课记录哦";
                        break;
                    case 1:
                        ret = "还没有上课记录哦";
                        break;
                    case 2:
                        ret = "还没有取消上课记录哦";
                        break;
                    }
                } else {
                    ret = "请登录后查看相关内容";
                }
                return ret;
            }
        },
        methods: {
            change() {
                if (!this.login) {
                    return;
                }
                this.show = false;
                this.params = {
                    type: this.active + 1
                };
                this.$refs.list.reset();
            },
            onRefresh() {
                this.$refs.list.reset(1);
                this.isLoading = false;
            },
            toPage() {
                // if (!this.login) {
                //     if (this.isApp) {
                //         this.$pub.appAction("login");
                //     } else {
                //         this.$router.push({
                //             name: "Login"
                //         });
                //     }
                // } else {
                //     if (this.$store.state.app) {
                //     this.$pub.appJump("oto");
                //     } else {
                //     this.$router.push({
                //         name: "Oto"
                //     });
                //     }
                // }
            },
            goPage(item) {
                if (this.isApp) {
                    this.$pub.appJump(`Communicate?id=${item.id}&t_id=${item.teacher_id}`);
                } else {
                    this.$router.push({
                    name: "Communicate",
                    query: {
                        id: item.id,
                        t_id: item.teacher_id
                    }
                    });
                }
            },
            onGetdata(data) {
                this.list = data;
            },
            sendCancel(item) {
                this.cancel_id = item.id;

                this.$http.get(`/api/app/oto/cancelCourseCount`).then(res => {
                    let time =
                    new Date(item.start_play * 1000).format("yyyy-MM-dd hh:mm") +
                    "-" +
                    new Date(item.end_play * 1000).format("hh:mm");
                    if(res.count<4){
                    this.msg = 
                        "取消课程后，资金将原路返回您的账户。确认取消" +
                        item.nickname +
                        "   " +
                        time +
                        "   的约课么？";
                    }else{
                    this.msg =
                    "您已经取消预约4次了，再次取消预约将不退课时。确认取消" +
                        item.nickname +
                        "   " +
                        time +
                        "   的约课么？"
                    }
                    this.cancelModel = true;
                })
            },
            cancel() {
                this.$http
                    .get(`/api/app/oto/cancelInvite/${this.cancel_id}/0`)
                    .then(() => {
                    this.$toast("取消成功");
                    this.change();
                    });
            },
            comment(item) {
                this.$http.get(`/api/app/oto/comment/info/${item.id}`).then(res => {
                    let params = {
                    teacher_id: item.teacher_id,
                    user_id: item.user_id,
                    oto_course_id: item.id,
                    tag: res.tag,
                    teacher_name: res.teacher_name,
                    course_time: res.course_time,
                    comment_id: item.is_comment // 0 评价老师  1 回显
                    };
                    this.$refs.comModel.showBox(params);
                });
            },
            look(id) {
                if (this.isApp) {
                    this.$pub.appAction("play", {
                    course_id: id
                    });
                } else {
                    this.$http.get(`/api/app/oto/getLiveRoomCode/${id}/0`).then(res => {
                    window.location.href = res.web_url;
                    });
                }
            }
        }
   };
</script>
<style scoped>
header{
    width: 100%;
    text-align: center;
    padding: .3rem 0;
    font-size: 18px;
    background: white;
    border-bottom: 1px solid #F0F2F5;
}

.box{
    width: 100%;
    height: 100%;
    /* background: #F0F2F5; */
}
.rp-empty{
    width: 100%;
}
.rp-empty img{
    display: block;
    width: 48%;
    margin: 2.5rem auto 20px;
}
.rp-empty p{
    font-size: 13px;
    font-family: PingFangSC-Regular;
    font-weight: 400;
    color: rgba(183, 183, 183, 1);
    text-align: center;
}
.rp-empty button{
    margin: 0 auto;
    display: block;
    width: 3rem;
    height: 1rem;
    font-size: 15px;
    color: rgba(255, 255, 255, 1);
    background: #EB6100;
    border-radius: 5px;
}
</style>